{% extends "award_base.html" %}
{% load i18n %}
{% block head %}
    <title>{% trans "蓝鲸开发框架" %}</title>
    {{ block.super }}
    <style>
        .p_class {
            text-align: left;
            vertical-align: center;
            font-size: 14px;
            font-weight: normal;
            color: #666;
            line-height: 1;
            box-sizing: border-box;
            padding: 1px 1px 5px 5px;
        }
    </style>

{% endblock %}

{% block content %}
<div class="page-content" style="min-width:80%;">
    <div class="bk-collapse-panel">
        <div class="panel-header" role="tab">
            <a role="button" data-toggle="collapse" href="#panel-content1" class="panel-icon panel-spread"></a>
            <h3 data-toggle="collapse" href="#panel-content1" class="panel-title">当前可申报奖项</h3>
        </div>
        <div id="panel-content1" class="panel-body panel-collapse collapse in p0">
            <div class="m15">
                <div class="row">
                    {% for award in award_data %}
                    <div class="col-lg-2">
                        <div class="bk-mark-show" style="height: 100px">
                            <p class="p_class" style="padding-top: 10px">{{ award.org_name }}</p>
                            <p class="p_class">{{ award.award_name }}</p>
                            <p class="p_class">提报人数{{ award.apply_person_num }}人</p>
                            <div class="bk-mark-corner bk-success">
                                <p>获奖{{ award.award_person_num }}</p>
                            </div>
                        </div>
                    </div>
                    {% endfor %}

                </div>
            </div>
        </div>
    </div>
    <div class="bk-collapse-panel">
        <div class="bk-panel bk-demo">
            <div class="panel-header" role="tab">
                <a role="button" data-toggle="collapse" href="#panel-content2" class="panel-icon panel-spread"></a>
                <h3 data-toggle="collapse" href="#panel-content2" class="panel-title">上次获奖人名单</h3>
            </div>
            <div id="panel-content2" class="panel-body panel-collapse collapse in p0">
                <table id="awardedTable" class="bk-table table-bordered">
                    <thead>
                        <tr>
                            <th>所属单位</th>
                            <th>申报奖项</th>
                            <th>申请时间</th>
                            <th>申报人/团队</th>
                            <th>申报详情</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="displayEditApplyModal" tabindex="1" role="dialog"
    aria-labelledby="displayEditApplyModalLabel" data-backdrop="static">
    <div class="modal-dialog" style="width: 1000px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="displayEditApplyModalLabel">奖项查看</h4>
            </div>
            <div class="row">
                <div class="col-lg-6">
                    <div class="bk-form" style="padding: 10px">
                        <div class="bk-form-item">
                            <label class="bk-label" style="width:150px;">奖项名称：</label>
                            <div class="bk-form-content" style="margin-left:150px;">
                                <p id="display_edit_display_award_name" class="p_class"></p>
                            </div>
                        </div>
                        <div class="bk-form-item">
                            <label class="bk-label" style="width:150px;">评奖条件：</label>
                            <div class="bk-form-content" style="margin-left:150px;">
                                <p class="p_class" id="display_edit_display_requirement" style="word-break: break-word">
                                </p>
                            </div>
                        </div>
                        <div class="bk-form-item">
                            <label class="bk-label" style="width:150px;">奖项级别：</label>
                            <div class="bk-form-content" style="margin-left:150px;">
                                <p class="p_class" id="display_edit_display_award_level"></p>
                            </div>
                        </div>
                        <div class="bk-form-item">
                            <label class="bk-label" style="width:150px;">所属组织：</label>
                            <div class="bk-form-content" style="margin-left:150px;">
                                <p class="p_class" id="display_edit_display_belonging_org"></p>
                            </div>
                        </div>
                        <div class="bk-form-item">
                            <label class="bk-label" style="width:150px;">开始时间：</label>
                            <div class="bk-form-content" style="margin-left:150px;">
                                <p class="p_class" id="display_edit_display_start_datetime"
                                    name="display_start_datetime"></p>
                            </div>
                        </div>
                        <div class="bk-form-item">
                            <label class="bk-label" style="width:150px;">结束时间：</label>
                            <div class="bk-form-content" style="margin-left:150px;">
                                <p class="p_class" id="display_edit_display_end_datetime"
                                    name="edit_display_end_datetime"></p>
                            </div>
                        </div>
                        <div class="bk-form-item">
                            <label class="bk-label" style="width:150px;">是否需要附件：</label>
                            <div class="bk-form-content" style="margin-left:150px;">
                                <p class="p_class" id="display_edit_display_need_attachment"></p>
                            </div>
                        </div>
                        <div class="bk-form-item">
                            <label class="bk-label" style="width:150px;">奖项状态：</label>
                            <div class="bk-form-content" style="margin-left:150px;">
                                <p class="p_class" id="display_edit_display_status"></p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <form id="validate_edit_form">
                        <div class="bk-form" style="padding: 10px 28px 10px 0">
                            <div class="bk-form-item">
                                <label class="bk-label" style="width:150px;">申报人/团队</label>
                                <div class="bk-form-content" style="margin-left:150px;">
                                    <p class="p_class" id="display_edit_applicant_info"></p>
                                </div>
                            </div>
                            <div class="bk-form-item">
                                <label class="bk-label" style="width:150px;">事迹介绍</label>
                                <div class="bk-form-content" style="margin-left:150px;">
                                    <p class="p_class" id="display_edit_introduction" style="word-break: break-word">
                                    </p>
                                </div>
                            </div>
                            <div class="bk-form-item">
                                <label class="bk-label" style="width:150px;">附件</label>
                                <div class="bk-form-content" style="margin-left:150px;">
                                    <a href="" target="_blank" id="display_edit_attachment_url"><span
                                            class="bk-tag is-fill bk-primary">点击查看附件</span></a>
                                </div>
                            </div>
                            <div class="bk-form-item">
                                <label class="bk-label" style="width:150px;">评审结果</label>
                                <div class="bk-form-content" style="margin-left:150px;">
                                    <p class="p_class" id="display_state"></p>
                                </div>
                            </div>
                            <div class="bk-form-item">
                                <label class="bk-label" style="width:150px;">评语</label>
                                <div class="bk-form-content" style="margin-left:150px;">
                                    <p class="p_class" id="display_comment"></p>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="bk-button bk-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
{% endblock %}
{% block extra_block %}
<script src="https://magicbox.bk.tencent.com/static_api/v3/assets/bootstrap-tagsinput-0.6.1/bootstrap-tagsinput.min.js"></script>
<script>
    var language = {
        search: "{% trans '搜索：' %}",
        lengthMenu: "{% trans '每页显示 _MENU_ 记录' %}",
        zeroRecords: "{% trans '没找到相应的数据！' %}",
        info: "{% trans '分页 _PAGE_ / _PAGES_ 共 _TOTAL_ 条' %}",
        infoEmpty: "{% trans '暂无数据！' %}",
        infoFiltered: "{% trans '(从 _MAX_ 条数据中搜索)' %}",
        paginate: {
            first: "{% trans '首页' %}",
            last: "{% trans '尾页' %}",
            previous: "{% trans '上一页' %}",
            next: "{% trans '下一页' %}",
        }
    }
    var getAwardTable = $('#awardedTable').DataTable({
        sProcessing: '<img alt="loadding" src="https://magicbox.bk.tencent.com/static_api/v3/components/loading1/images/loading_2_36x36.gif">', //这里很重要，如果你的加载中是文字，则直接写上文字即可，如果是gif的图片，使用img标签就可以加载
        pagingType: "full_numbers",
        paging: true, //隐藏分页
        ordering: false, //关闭排序
        info: true, //隐藏左下角分页信息
        searching: false, //关闭搜索
        pageLength: 10, //每页显示几条数据
        lengthChange: false, //不允许用户改变表格每页显示的记录数
        language: language, //汉化
        serverSide: true,
        lengthMenu: [5, 10, 25, 50, 75, 100],
        ajax: {
            url: '{{SITE_URL}}get_awarded_list/',
            method: "get",
            dataType: 'json',
            dataSrc: function (json) {
                json.draw = json.data.info.draw;
                json.recordsTotal = json.data.info.recordsTotal;
                json.recordsFiltered = json.data.info.recordsFiltered;
                json.data = json.data.info.data

                return json.data;
            },
        },
        columnDefs: [{
                targets: 0,
                data: "belonging_org",
            },
            {
                targets: 1,
                data: "award_name",
            },
            {
                targets: 2,
                data: "apply_time",
            },
            {
                targets: 3,
                data: "applicant_info",
            },
            {
                targets: 4,
                data: "apply_id",
                render: function (data, type, row, meta) {
                    return '<a class="bk-icon-button bk-success bk-button-mini" type="button" onclick="displayAwardApplyModal(' +
                        row.award_id + ',' + data +
                        ')"  data-toggle="modal" data-target="#displayEditApplyModal" title="查看">\n' +
                        '<i class="bk-icon icon-search bk-icon"></i>\n' +
                        '<i class="bk-text">查看</i>\n' +
                        '</a>\n';
                }
            },
        ]
    });
    setInterval(function () {
        getAwardTable.ajax.reload(null, false); // user paging is not reset on reload
    }, 30000);

    function displayAwardApplyModal(award_id, apply_id) {
        $.ajax({
            url: '{{ SITE_URL }}get_display_award_apply_info/' + award_id + '/' + apply_id,
            method: 'get',
            success: function (response) {
                if (response['result']) {
                    $("#display_edit_display_award_name").html(response.data.info.data.award_name);
                    $("#display_edit_display_requirement").html(response.data.info.data.requirement);
                    $("#display_edit_display_award_level").html(response.data.info.data.award_level);
                    $("#display_edit_display_belonging_org").html(response.data.info.data.belonging_org);
                    $("#display_edit_display_start_datetime").html(response.data.info.data.start_time);
                    $("#display_edit_display_end_datetime").html(response.data.info.data.end_time);
                    $("#display_edit_display_need_attachment").html(response.data.info.data
                    .need_attachment);
                    $("#display_edit_display_status").html(response.data.info.data.status);

                    $("#display_edit_applicant_info").html(response.data.info.data.applicant_info);
                    $("#display_edit_introduction").html(response.data.info.data.introduction);
                    $("#display_edit_attachment_url").attr('href', "{{ SITE_URL }}" + response.data.info
                        .data.attachment_url);
                    $("#display_comment").html(response.data.info.data.comment);
                    $("#display_state").html(response.data.info.data.state);

                } else {
                    // 失败处理
                    new bkMessage({
                        message: response['message'],
                        theme: 'error',
                        delay: 3000
                    });
                }
            }
        })
    }
</script>
{% endblock %}